<template>
    <div class="basic-wrapper">
        <div class="title">基本信息</div>
        <el-skeleton animated :loading="loading">
            <template #template>
                <el-skeleton-item />
                <el-skeleton-item />
                <el-skeleton-item />
                <el-skeleton-item />
            </template>
            <template #default>
                <el-descriptions v-if="detailData" :column="4" border>
                    <el-descriptions-item :span="3" label="任务名称">
                        {{ detailData.jobName }}
                    </el-descriptions-item>
                    <el-descriptions-item :span="1" label="标识符">
                        {{ detailData.jobNo }}
                    </el-descriptions-item>
                    <el-descriptions-item :span="3" label="产品">
                        <el-button link type="primary" @click="onGoDetail">
                            {{ detailData.productName }}
                        </el-button>
                    </el-descriptions-item>
                    <el-descriptions-item :span="1" label="触发方式">
                        <div class="img-item-value">
                            <el-tag>
                                {{ TriggerType[detailData.triggerType] }}
                            </el-tag>
                        </div>
                    </el-descriptions-item>
                    <el-descriptions-item :span="4" label="API" v-if="detailData.triggerType == 'API'">
                        {{ detailData.api }}
                    </el-descriptions-item>
                    <el-descriptions-item :span="1" label="创建人">
                        {{ detailData?.creator }}
                    </el-descriptions-item>
                    <el-descriptions-item :span="1" label="创建时间">
                        {{ detailData?.createTime }}
                    </el-descriptions-item>
                    <el-descriptions-item :span="1" label="当前版本">
                        <div class="version-item-value">
                            <div>{{ detailData?.version }}</div>
                            <el-button type="primary" link disabled> 查看历史版本 </el-button>
                        </div>
                    </el-descriptions-item>
                    <el-descriptions-item :span="1" label="记录日志">
                        <el-switch :model-value="detailData.triggerModel?.logRecord" />
                    </el-descriptions-item>
                    <el-descriptions-item :span="4" label="描述">
                        <div class="value">{{ detailData?.jobDesc }}</div>
                    </el-descriptions-item>
                </el-descriptions>
            </template>
        </el-skeleton>
    </div>
</template>
<script setup lang="ts">
import { useRouter } from 'vue-router';
import { TriggerType } from '@/utils/constant';
import { checkPermi } from '@/utils/ruoyi';

const router = useRouter();
const props = defineProps<{
    detailData?: Record<string, any>;
}>();
const loading = ref(true);

const onGoDetail = () => {
    if (checkPermi(['iot:task:detail'])) {
        router.push({
            name: 'IoT-product-detail',
            params: {
                id: props.detailData?.productId
            }
        });
    }
};

watch(
    () => props.detailData,
    newValue => {
        if (newValue) loading.value = false;
    },
    { immediate: true }
);
</script>
<style scoped lang="scss">
.basic-wrapper {
    .title {
        font-size: 18px;
        font-weight: 600;
        margin-bottom: 10px;
        display: flex;
        align-items: center;
        > span {
            margin-right: 5px;
        }
        .el-icon {
            cursor: pointer;
        }
    }
    .el-descriptions {
        .label {
            display: flex;
            align-items: center;
            > span {
                margin-right: 3px;
            }
        }
        .value {
            height: 64px;
        }
        .version-item-value {
            display: flex;
            justify-content: space-between;
        }
        .img-item-value {
            display: flex;
            align-items: center;
        }
    }
}
</style>
